window.addEventListener("load", function () {
	// 功能二：tab区动态渲染
	const apiData = [
		{ times: 4000, price: 1200, unitPrice: "0.3000" },
		{ times: 8000, price: 2000, unitPrice: "0.2500" },
		{ times: 40000, price: 8000, unitPrice: "0.2000" },
	];
	// 遍历时拼接为html结构
	apiData.forEach(function (v) {
		$("#rightText .options").innerHTML += `
			<button data-price=${v.price} data-unitPrice=${v.unitPrice}>${v.times}次</button>
		`;
	});
	// 给默认默认第一个激活样式
	$("#rightText .options button")[1].classList.add("active");
	// 默认显示第一个激活样式的价格（或者是可以直接在html结构中写上第一个样式）
	$("#rightText .price").innerHTML = `
		<strong>￥${$("#rightText .options button")[1].dataset.price}</strong>
		<span>（约${
			$("#rightText .options button")[1].dataset.unitprice
		}元/次），仅限企业实名购买。</span>
		`;

	// 功能一：点击tab区增加激活样式
	// 1.获取相关节点
	$("#rightText .options button").forEach(function (v) {
		// 2.绑定点击事件
		v.addEventListener("click", function (i) {
			// 如果this里面没有这个default样式类名，那么就添加active样式
			if (!this.classList.contains("default")) {
				// 3.排他思想：先把所有样式清空
				$("#rightText .options button").forEach(function (item) {
					item.classList.remove("active");
				});
				// 4.再给点击对象增加激活样式
				// $("#rightText .options button")[0].classList.remove("active");
				this.classList.add("active");

				// 功能三：点击tab按钮，在下方联动生成对应的价格数据
				$("#rightText .price").innerHTML = `
					<strong>￥${this.dataset.price}</strong>
					<span>（约${this.dataset.unitprice}元/次），仅限企业实名购买。</span>
					`;
			}
		});
	});

	// 功能四：点击tab栏激活对应样式
	$("#apiList li a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$("#apiList li a").forEach(function (item, index) {
				item.classList.remove("active");
				$("#left div")[index].style.display = "none";
			});
			this.classList.add("active");
			$("#left div")[i].style.display = "block";
		});
	});

	//配置
	const config = {
		selector: "#bannerBg",
		vx: 4, //点x轴速度,正为右，负为左
		vy: 4, //点y轴速度
		height: 2, //点高宽，其实为正方形，所以不宜太大
		width: 2,
		count: 100, //点个数
		color: "121, 162, 185", //点颜色
		stroke: "130,255,255", //线条颜色
		dist: 6000, //点吸附距离
		e_dist: 20000, //鼠标吸附加速距离
		max_conn: 10, //点到点最大连接数
	};
	//调用
	CanvasParticle(config);

	// 回到顶部
	// 绑定点击事件
	$("span.iconfont").addEventListener("click", function () {
		window.scrollTo({
			top: 0,
			behavior: "smooth",
		});
	});
	// 判断滚动事件
	this.window.addEventListener("scroll", function () {
		if (window.scrollY < 500) {
			$("span.iconfont").style.display = "none";
		} else if (window.scrollY > 500) {
			$("span.iconfont").style.display = "block";
		}
	});
});
